<template>
  <view class="card-container">
    <!-- 置顶标签（isTop为true时显示） -->
    <text v-if="isTop" class="top-tag">置顶</text>
    <!-- 新闻标题 -->
    <text class="card-title">{{ title }}</text>
    <!-- 作者+评论区 -->
    <view class="card-footer">
      <text class="card-author">{{ author }}</text>
      <text class="card-comments">评论 {{ comments }}</text>
    </view>
  </view>
</template>

<script>
export default {
  // 接收父组件传递的props（必传+类型限制）
  props: {
    title: {
      type: String,
      required: true // 标题为必传项
    },
    isTop: {
      type: Boolean,
      default: false // 默认非置顶
    },
    author: {
      type: String,
      required: true
    },
    comments: {
      type: Number,
      default: 0 // 评论数默认0
    }
  }
};
</script>

<style scoped>
/* 卡片容器 */
.card-container {
  background: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 15rpx;
  position: relative; 
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

/* 置顶标签 */
.top-tag {
  position: absolute;
  left: 0;
  top: 20rpx;
  background: #ff9800;
  color: #fff;
  font-size: 22rpx;
  padding: 2rpx 12rpx;
  border-radius: 0 10rpx 10rpx 0;
}

/* 新闻标题 */
.card-title {
  font-size: 28rpx;
  color: #333;
  line-height: 44rpx;
  margin-bottom: 15rpx;
  padding-left: 60rpx;
}

/* 作者+评论区 */
.card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
  padding-left: 60rpx; 
}
</style>